import React from 'react';
import styles from './index.less';

import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';

import BpmnModeler from 'bpmn-js/lib/Modeler';

export default class extends React.Component {
  componentDidMount = () => {
    this.bpmnModeler = new BpmnModeler({
      container: this.canvasDom,
      keyboard: { bindTo: document },
      additionalModules: [],
      moddleExtensions: [],
    });

    this.getData();
  };
  // 获取数据
  getData = () => {
    var viewer = this.bpmnModeler;
    async function showDiagram(diagramXML) {
      await viewer.importXML(diagramXML);

      var overlays = viewer.get('overlays'),
        canvas = viewer.get('canvas'),
        elementRegistry = viewer.get('elementRegistry'),
        modeling = viewer.get('modeling');

      // Option 1: Color via Overlay
      var shape = elementRegistry.get('CalmCustomerTask');

      var $overlayHtml = $('<div class="highlight-overlay">').css({
        width: shape.width,
        height: shape.height,
      });

      overlays.add('CalmCustomerTask', {
        position: {
          top: 0,
          left: 0,
        },
        html: $overlayHtml,
      });

      // Option 2: Color via BPMN 2.0 Extension
      var elementToColor = elementRegistry.get('SelectAPizzaTask');

      modeling.setColor([elementToColor], {
        stroke: 'green',
        fill: 'rgb(152, 203, 152)',
      });

      // Option 3: Color via Marker + CSS Styling
      canvas.addMarker('OrderReceivedEvent', 'highlight');
    }

    // load + show diagram
    $.get(
      'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/master/colors/resources/pizza-collaboration.bpmn',
      showDiagram,
      'text',
    );
  };

  render() {
    return (
      <div className={styles.container}>
        <div
          className={styles.BpmnCont}
          ref={dom => {
            this.canvasDom = dom;
          }}
        ></div>
      </div>
    );
  }
}
